<template>
  <v-form
    v-model="valid"
    @submit.prevent
  >
    <v-layout>
      <v-text-field
        v-model.number="inputValue"
        outlined
        dense
        single-line
        hide-details="auto"
        :disabled="!klippyReady"
        :loading="loading"
        :rules="[
          $rules.numberGreaterThanOrEqualOrZero(min),
          $rules.numberLessThanOrEqualOrZero(max)]"
        suffix="°C"
        class="v-input--width-x-small"
        @keyup.enter="emitChange"
        @focus="$event.target.select()"
      />
    </v-layout>
  </v-form>
</template>

<script lang="ts">
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
import StateMixin from '@/mixins/state'

@Component({})
export default class InputTemperature extends Mixins(StateMixin) {
  @Prop({ type: Number, required: true })
  readonly value!: number

  @Prop({ type: Number, default: null })
  readonly max!: number

  @Prop({ type: Number, default: null })
  readonly min!: number

  @Prop({ type: Boolean, default: false })
  readonly loading!: boolean

  @Watch('value')
  onValueChange (val: number) {
    this.inputValue = val
  }

  valid = true
  inputValue = 0

  emitChange () {
    if (this.valid) {
      if (!this.inputValue) this.inputValue = 0
      this.$emit('input', this.inputValue)
    }
  }

  mounted () {
    this.inputValue = this.value
  }
}
</script>
